* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

%center {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

@mixin style($h:auto, $b: transparent, $w: 100%) {
  height: $h;
  width: $w;
  background: $b;
}


#app {
  display: flex;
  flex-direction: column;

  header,
  footer {
    @extend %center;
    @include style(46px, skyblue)
  }

  main {
    flex: 1;
    display: flex;
    overflow: hidden;

    .title {
      @include style(100%, #fff, 80px);
      @extend %center;
      border-right: 1px solid #ccc;
      flex-direction: column;

      b.active {
        color: red;
      }
    }

    .con {
      flex: 1;
      height: 100%;
      overflow-y: scroll;

      dl {
        display: flex;
        padding: 10px;
        border-bottom: 1px solid #ccc;
      }
    }
  }

}